<template>
  <div class="comment">
    <p class="comment-title">
      <span>评论</span>
    </p>
    <div class="commentMyinfo" v-if="!isAdmin">
      <img 
      v-if="isLogin"
      :src="user.handUrl" alt="" />

      <div
        class="navhander"
        style="cursor: pointer"
        v-else
      >
        {{'login'}}
      </div>

      <input
        v-model="comcontent"
        ref="Postipt"
        type="text"
        @keyup.enter="cmmentPublish"
        placeholder="说点什么吧"
        style="cursor: pointer"
      />
      <button @click="cmmentPublish" style="cursor: pointer">发表</button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      comcontent: "",
    };
  },
  computed: {
    ...mapGetters(["baseUrl", "isLogin", "user","isAdmin"]),
  },
  methods: {
    async cmmentPublish() {
      if (!this.isLogin) {
        this.$msg.fail("请先登录");
        return;
      }
      var obj = {
        vid: this.$route.params.id,
        parent_id: null,
        content: this.comcontent,
        uid: this.user.id,
      };

      const { data: res } = await this.$http.post("/comments", obj);

      if (res.code == 200) {
        this.$msg.fail("评论成功");
        this.comcontent = "";
      } 
      
    },
    focusIpt() {
      this.$refs.Postipt.focus();
    },
  },
};
</script>

<style lang="less">
.comment {
  width: 60%;
  padding: 1vw 2vw 0 2.7778vw;
  margin-left: 8vw;
  .comment-title {
    span:nth-child(2) {
      color: #aaa;
      margin-left: 2.778vw;
    }
  }
  .commentMyinfo {
    padding: 2.778vw 0;
    display: flex;
    img {
      height: 3vw;
      width: 3vw;
      border-radius: 50%;
    }
    input {
      outline: none;
      border: 0;
      background-color: #f4f4f4;
      border-radius: 3.611vw;
      font-size: 1vw;
      padding: 0 3vw 0 2vw;
      margin-left: 2vw;
      margin-top: 0.5vw;
      height: 2.7vw;
      width: 28vw;
    }
    button {
      outline: none;
      border: 0;
      border-radius: 1.5vw;
      background: #fb7299;
      color: white;
      font-size: 1.2vw;
      padding: 0 1vw;
      height: 2.5vw;
      margin-left: 2vw;
      margin-top: 0.7vw;
    }
  }
}
.navhander {
    height: 4vw;
    width: 4vw;
    line-height: 4vw;
    text-align: center;
    color: white;
    border-radius: 50%;
    font-size: 1rem;
    background-color: #00aeec;
    background-size: cover;
  }
</style>